<template>
  <div class="main">
    <h4>安全辅助驾驶证据表</h4>
    <hr />
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- 时间选择器 -->
      <el-form-item label="请选择时间">
        <el-date-picker
        v-model="formInline.date"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
        </el-date-picker>
      </el-form-item>

      <!-- 选择车辆 -->
      <el-form-item label="选择车辆">
        <el-input v-model="formInline.car" placeholder="请选择" readonly @click.native="dialogCarVisible=true"></el-input>
      </el-form-item>

      <!-- 报警类型 -->
      <el-form-item label="报警类型">
        <el-cascader
          :options="options"
          :props="props"
          v-model="formInline.cascader"
          collapse-tags
          clearable>
        </el-cascader>
      </el-form-item>

      <!-- 多媒体类型 -->
      <el-form-item label="多媒体类型">
        <el-select v-model="formInline.media">
          <el-option label="图片" value="photo"></el-option>
          <el-option label="视频" value="video"></el-option>
        </el-select>
      </el-form-item>

      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>

      <!-- 导出 -->
      <el-form-item>
        <el-button type="primary">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 选择车辆 -->
    <el-dialog title="选择车辆" :visible.sync="dialogCarVisible" width="500px">
      <car-list @option-car="optionCar" :isDialog="true"></car-list>
    </el-dialog>
  </div>
</template>

<script>
import reportApi from '@/api/report'
import CarList from '@/views/carList'

export default {
  components: {CarList},

  data() {
      return {
        // 时间选择器
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        formInline: {
          date: '',
          cascader: [],
          media: '图片',
          car: ''
        },
        props: { multiple: true },
        options: [{
          value: '全部',
          label: '全部',
          children: [{
            value: '面向警示',
            label: '面向警示'
          },{
            value: '闭眼警示',
            label: '闭眼警示'
          },{
            value: '离岗',
            label: '离岗'
          },{
            value: '左顾右盼',
            label: '左顾右盼'
          },{
            value: '打哈欠',
            label: '打哈欠'
          },{
            value: '急加速',
            label: '急加速'
          },{
            value: '急减速',
            label: '急减速'
          },{
            value: '异常驾驶',
            label: '异常驾驶'
          },{
            value: '面部疲劳',
            label: '面部疲劳'
          },{
            value: '前车碰撞预警',
            label: '前车碰撞预警'
          },{
            value: '道路偏离报警',
            label: '道路偏离报警'
          },{
            value: '行人检测报警',
            label: '行人检测报警'
          },{
            value: '驾驶员遮挡或镜头偏离位置',
            label: '驾驶员遮挡或镜头偏离位置'
          },{
            value: '不系安全带',
            label: '不系安全带'
          },{
            value: '车距近',
            label: '车距近'
          },{
            value: '急刹车',
            label: '急刹车'
          },{
            value: '急左转弯',
            label: '急左转弯'
          },{
            value: '急右转弯',
            label: '急右转弯'
          },{
            value: '低头',
            label: '低头'
          },{
            value: '手机警示',
            label: '手机警示'
          },{
            value: '抽烟警示',
            label: '抽烟警示'
          }]
        }],
        // 选择车辆
        dialogCarVisible: false
      }
    },

    methods: {
      onSubmit() {
        // 获取报警选择框数据
        const alertArr = []
        const arr = this.formInline.cascader
        for(var i=0; i<arr.length; i++){
          alertArr.push(arr[i][arr[i].length-1])
        }

        // 请求安全辅助驾驶证据表
        reportApi.getOneOfOne(this.formInline).then(response => {
          const resp = response.data
          if(resp.flag){
            const respD = response.data.data
          }else{
            this.$message({
              message: resp.message,
              type: 'warning'
            })
          }
        })
      },

      optionCar(currentRow){
        console.log('parent', currentRow)
        console.log(currentRow.carP)
        this.formInline.car = currentRow.carP
        this.dialogCarVisible = false
      }
    }
}
</script>

<style scoped>
.main{
  position: absolute;
  left: 250px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}
hr{
  padding: 0;
  margin: 0;
}
.el-form{
  padding: 20px 10px 10px 10px;
  background-color: #eee;
}
.el-date-picker{
  margin-right: 10px;
}
</style>